<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>detail</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background: #f8f8f8;
        }

        .swiper {
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .swiper-wrapper {
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 300%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            height: 330px;
        }

        .swiper-slide img {
            display: block;
        }

        .swiper-pagination {
            position: absolute;
            bottom: 16px;
            right: 8px;
            height: 22px;
            padding: 0 10px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 11px;
            text-align: center;
            font-size: 10px;
            line-height: 22px;
            color: white;
        }

        .swiper-pagination-bullet {
            width: 3px;
            height: 3px;
            text-align: center;
            line-height: 3px;
            opacity: 1;
            background: rgba(255, 255, 255, 0.4);
            margin: 0 2px;
            border-radius: 50%;
        }

        .swiper-pagination-bullet-active {
            background: #fff;
            width: 12px;
            height: 3px;
            border-radius: 1.5px;
        }

        .goods_box {
            padding: 15px;
            background-color: white;
        }

        .goods_top {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .goods_spr {
            margin-top: 5px;
            margin-right: 3px;
            font-size: 16px;
            color: #fe904a;
        }

        .goods_pr {
            font-size: 23px;
            color: #fe904a;
        }

        .flex1 {
            flex: 1;
        }

        .goods_mpr {
            font-size: 12px;
            text-decoration: line-through;
            margin-left: 10px;
            margin-top: 8px;
            color: #b5b5b5;
        }

        .hot-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 1px 6px;
            background-color: #fef8f4;
            border-radius: 8px;
            border: 1px solid #fe904a;
        }

        .hot-num-img {
            width: 9px;
            height: 11px;
            margin-right: 3px;
        }

        .hot-num {
            color: #fe904a;
            font-size: 10px;
        }

        .goods_tit {
            margin-top: 15px;
            line-height: 22px;
            color: #333333;
            font-weight: bold;
            text-overflow: ellipsis;
            white-space: normal;
        }

        .goods_exp {
            font-size: 14px;
            margin-top: 8px;
            color: #666;
        }

        .goods_spec_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 50px;
            margin-top: 8px;
            padding: 0 15px;
            background-color: white;
        }

        .goods_arrow {
            width: 14px;
            height: 14px;
        }

        .goods_spec_desc {
            font-size: 14px;
            color: #666;
        }

        .goods_spec_text {
            font-size: 14px;
            color: #333;
            margin-left: 14px;
        }

        .goods_details_box {
            margin-top: 8px;
            background-color: white;
            padding: 0 15px 10px;
        }

        .goods_detail_desc {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 52px;
            border-bottom: 1px solid #f8f8f8;
        }

        .left_line {
            width: 3px;
            height: 14px;
            border-radius: 2px;
            background-color: #fe904a;
        }

        .left_zi {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-left: 8px;
        }

        .goods_rich {
            margin-top: 10px;
        }

        .floor_box_page {
            width: 100%;
            background-color: white;
        }

        .floor_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 48px;
            padding: 0 15px;
        }

        .floor_btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 45px;
        }

        .floor_icon {
            width: 20px;
            height: 20px;
        }

        .floor_zi {
            font-size: 10px;
            margin-top: 3px;
            color: #666;
        }

        .floor_btn_4 {
            flex: 1;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
            font-size: 14px;
        }

        .floor_btn_4:active {
            opacity: 0.7;
        }

        .btn_orange {
            margin-left: 15px;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            background-color: #ffad00;
        }

        .btn_red {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            background-color: #ff6600;
        }

        .-my-swiper-img {
            width: 100%;
            height: 330px;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="nav-bar">
            <div onclick="back()" class="nav-bar-back">
                <img src="../images/back/back.png" alt="back" class="nav-bar-back-icon" />
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">商品详情</span>
        </div>
        <div class="scroll-view-y">
            <!-- 轮播图 -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 商品信息 -->
            <div class="goods_box">
                <div class="goods_top">
                    <span class="goods_spr">¥</span><span class="goods_pr">5999</span>
                    <span class="goods_mpr">￥1299</span>
                    <div class="flex1"></div>
                    <div class="hot-box">
                        <img class="hot-num-img"
                            src="../images/main2/hot.png" />
                        <span class="hot-num">39.00w</span>
                    </div>
                </div>
                <span class="goods_tit">夏新款套装女洋气时尚短裤阔腿裤两件套小个子夏装搭配显高</span>
                <span class="goods_exp">快递：免费</span>
            </div>
            <!-- 规格 -->
            <div class="detail-size">
                <div class="goods_spec_box">
                    <span class="goods_spec_desc">规格</span>
                    <span class="goods_spec_text">白色/S码</span>
                    <div class="flex1"></div>
                    <img class="goods_arrow"
                        src="../images/main1/gor3.png" />
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="detail-good">
                <div class="goods_details_box">
                    <div class="goods_detail_desc">
                        <div class="left_line"></div>
                        <span class="left_zi color_1">商品详情</span>
                    </div>
                    <p style="font-size: 14px; color: #444;">2020夏新款韩版连衣裙女收腰显瘦显高A</p>
                    <img style="width:100%; height: 345px;"
                        src="../images/linkImg/a53acc0734fa8faa9e756168a75e03ab.png" />
                </div>
            </div>
        </div>
        <div class="floor_box_page">
            <div class="floor_box">
                <div class="floor_btn" onclick="onshare()">
                    <img class="floor_icon" src="../images/main1/share.png" />
                    <span class="floor_zi">分享</span>
                </div>
                <div class="floor_btn" onclick="oncart()" obj-login="1">
                    <img class="floor_icon" src="../images/main1/car.png" />
                    <span class="floor_zi">购物车</span>
                </div>
                <span class="floor_btn_4 btn_orange" onclick="onaddcart()">加入购物车</span>
                <span class="floor_btn_4 btn_red" onclick="onbuy()">立即购买</span>
            </div>
            <safe-area></safe-area>
        </div>
    </div>
</body>

<script src="../script/api.js"></script>
<script src="../script/swiper-bundle.min.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
    }

    function back() {
        api.closeWin();
    }

    // 轮播图
    let swiperList = [
        "../images/linkImg/52cf5195745061cd23f659c9d9a4e8d1.png",
        "../images/linkImg/cdd745ebab4d463b6dc5e2656e6cf84d.png",
        "../images/linkImg/02e1b158a350a622fd1132b2f09fc4e4.png"
    ]
    getSwiperContent()
    function getSwiperContent() {
        let str = '';
        swiperList.forEach((item,index) => {
            str += `
            <div class="swiper-slide" onclick="getGoodsDetail(${index})"><img src="${item}" class="-my-swiper-img" /></div>
            `
        })
        document.querySelector('.swiper-wrapper').innerHTML = str;

    }

    function getGoodsDetail(param) {
        console.log('goods')
    }

    var swiper = new Swiper(".mySwiper", {
        autoplay: true,
        pagination: {
            el: ".swiper-pagination",
            type: "fraction",
        },
    });

    function onaddcart() {
        api.openWin({
            name: 'shopping_cart',
            url:'./shopping_cart.html',
            pageParam: {
                param: '1'
            }
        })
    }

    function onbuy() {
        api.openWin({
            name: 'place_order',
            url:'./place_order.html'
        })
    }

    function oncart() {
        api.toast({
            msg:'addcar'
        })
    }

    function onshare() {
        api.toast({
            msg:'share'
        })
    }
</script>

</html>